
<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Phonegap Sample App</title>
            <link href="css/jquery.mobile-1.1.1.css" rel="stylesheet" type="text/css"/>
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript"> 
            var onDeviceReady   = function(){
                console.log("JPushPlugin:Device ready!")
                initiateUI();
            }
            var onGetRegistradionID = function(data) {
                try{
                    console.log("JPushPlugin:registrationID is "+data)
                    
                    $("#registrationid").html(data);
                }
                catch(exception){
                    console.log(exception);
                }
            }

            var onTagsWithAlias = function(event){
                try{
                    console.log("onTagsWithAlias");    
                    var result="result code:"+event.resultCode+" ";
                    result+="tags:"+event.tags+" ";
                    result+="alias:"+event.alias+" ";
                    $("#tagAliasResult").html(result);
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onOpenNotification = function(event){
                try{
                    var alertContent
                    if(device.platform == "Android"){
                        alertContent=window.plugins.jPushPlugin.openNotification.alert;
                    }else{
                        alertContent   = event.aps.alert;
                    }
                    alert("open Notificaiton:"+alertContent);
                    
                }
                catch(exception){
                    console.log("JPushPlugin:onOpenNotification"+exception);
                }
            }
            var onReceiveNotification = function(event){
                try{
                    
                    var eventContent="{";
                    for(var key in event){
                        if(key=="type"){
                            break
                        }
                       eventContent+=key+":"+JSON.stringify(event[key])+"\n"
                    }
                    eventContent+="}";
                    $("#notificationResult").html(eventContent);
                    
                }
                catch(exeption){
                    console.log(exception)
                }
            }
            var onReceiveMessage = function(event){
                try{
                     var message = window.plugins.jPushPlugin.receiveMessage.message;
                     //var extras = window.plugins.jPushPlugin.extras
        
                     $("#messageResult").html(message);
                     
                }
                catch(exception){
                    console.log("JPushPlugin:onReceiveMessage-->"+exception);
                }
            }

            var initiateUI = function(){
            
            	try{
                    window.plugins.jPushPlugin.init();
                    window.plugins.jPushPlugin.getRegistrationID(onGetRegistradionID);
                    
                    if(device.platform == "Android"){
                        window.plugins.jPushPlugin.setDebugModeFromIos();
                        window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0);
                    }else{
                        window.plugins.jPushPlugin.setDebugMode(true);
                    }
            	}
            	catch(exception){
            		console.log(exception);
            	}
               $("#setTagWithAliasButton").click(function(ev) {
                    try{
                        var tag1 = $("#tagText1").attr("value");
                        var tag2 = $("#tagText2").attr("value");
                        var tag3 = $("#tagText3").attr("value");
                        var alias = $("#aliasText").attr("value");
                        var dd = [];
                            
                        if(tag1==""&&tag2==""&&tag3==""){                          
                        }
                        else{
                            if(tag1 != ""){
                                dd.push(tag1);
                            }
                            if(tag2 != ""){
                                dd.push(tag2);
                            }
                            if(tag3 != ""){
                                dd.push(tag3);
                            }
                        }
                        window.plugins.jPushPlugin.setTagsWithAlias(dd,alias);
                        
                    }
                    catch(exception){
                        console.log(exception);
                    }
                })
            }
            document.addEventListener("jpush.setTagsWithAlias", onTagsWithAlias, false);
            document.addEventListener("deviceready", onDeviceReady, false); 
            document.addEventListener("jpush.openNotification", onOpenNotification, false);
            document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);
            document.addEventListener("jpush.receiveMessage", onReceiveMessage, false);


            //jpush.receiveMessage
        </script>
    </head>
    <body>
        <div data-role="page" id="page">
            
            <div data-role="content">
                <form>
                    <div class="ui-body ui-body-b">
                        
                        <div data-role="fieldcontain">
                            <center><h3>JPushPlugin Example</h3></center>
                            <span name="alias" id="alias"></span><hr />
                            <label>RegistrationID: </label>
                            <label id="registrationid">null</label>
                        </div>
                        <div data-role="fieldcontain">
                            <label>Tags: </label>
                            <table>
                                <tr>
                                    <td>
                                        <input type="text"  id="tagText1"/>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text"  id="tagText2"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text"  id="tagText3">
                                    </td>
                                </tr>
                            </table>
                            <label>Alias: </label>
                            <table>
                                <tr>
                                    <td>
                                        <input type="text"   id="aliasText">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div data-role="fieldcontain">
                            <input type="button" id="setTagWithAliasButton" value="Add tag and alias" />
                        </div>
                        <div data-role="fieldcontain">
                            <label id="tagAliasPrompt" >设置tag/alias结果：  </label>
                            <label id="tagAliasResult" >null</label>
                        </div>
                        <div data-role="fieldcontain">
                            <label id="notificationPrompt" >接受的通知内容:</label>
                            <label id="notificationResult" >null</label>
                        </div>
                        <div data-role="fieldcontain">
                            <label id="messagePrompt" >接受的自定义消息:</label>
                            <label id="messageResult" >null</label>
                        </div>


                    </div>
                </form>
            </div>
            
        </div>
    </body>
</html>


